<template>
	<div id="search">
		<div class="search">
            <input type="text" placeholder="歌手/歌曲" v-model="msg" @input="tishi">
            <button @click="searchBtn()"><i class="iconfont icon-sousuo "></i></button>
    	</div>
    	<div class="tishiBox" >
    		
    		<p class="tishiSearch" v-for="t in tishiSearch"><i class="iconfont icon-iconfontzhizuobiaozhun22"></i>{{t.name}}</p>
    	</div>
    	<p class="hotP">热门搜索</p>
    	<div class="hot" v-show="on" >
    		<span v-for="h in hots">
    			{{h.first}}
    		</span>
    	</div>
    	<div class="searchSing" v-for="s in songs" @click="play(s.id)">
			<span class="sing_name">
				{{s.name}}
			</span>
			<p class="search_p">
				<span class="singer" v-for="(a,i) in s.artists">
				{{a.name}}
				<span v-if="(i!==s.artists.length-1)">/</span>
				</span>
				
				<span class="album">
					- {{s.album.name}}
				</span>
			</p>
		</div>
	</div>
	
</template>

<script>
	
	import axios from 'axios';
	
	export default{
		beforeMount(){
			axios.get("https://netease.bluej.cn/search/hot?timestamp=11").then((res)=>{
				this.hots = res.data.result.hots;
				console.log(this.hots);
			})
		},
		methods:{
			searchBtn(){
				$(".tishiSearch").css("display","none");
				axios.get("https://netease.bluej.cn/search?timestamp=11",{
					params:{
						keywords:this.msg,
					}
				}).then((res)=>{
					this.songs = res.data.result.songs;
					this.msg="";
					console.log("songs",this.songs);
					this.on = false;
				})
			},
			
			play(songid){
				this.$store.commit("change",{
					playState:true,
					id:songid,
				});
				console.log("aaa",this);
				this.$parent.$parent.$refs.player.getSong();
				this.$router.push({path:"/play",query:{id:songid}});
				this.$parent.$parent.flag=false;
			},
			tishi(){
				if (this.msg !=="") {
					$(".hotP").css("display","none");
					$(".hot").css("display","none");
					$(".tishiSearch").css("display","block");
					axios.get("https://netease.bluej.cn/search/suggest?timestamp=11",{
					params:{
						keywords:this.msg,
						}
					}).then((res)=>{
						this.tishiSearch = res.data.result.songs;
					})
				}else{
					$(".tishiSearch").css("display","none");
					$(".hotP").css("display","block");
					$(".hot").css("display","flex");
				}
			}
		},
		data(){
			return{
				msg:"",
				//搜索到的歌曲
				songs:[],
				hots:[],
				on:true,
				tishiSearch:[]
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	#search{
		padding-top: 88px;
		padding-bottom: 50px;
	}
	.search{
		margin-top: 20px;
		display: inline-block;
		background: #E6E6E6;
		border-radius: 20px;
		border: 2px solid #D43C33;
		height: 35px;
		width:75%;
		input,button{
			border: none;
			outline: none;
		}
		input {
			text-indent: 5px;
			border-radius: 20px;
			background: #E6E6E6;
            width: 78%;
            height: 35px;
        }
        button {
        	border-radius: 0 20px 20px 0;
            height: 35px;
            width: 36px;
            cursor: pointer;
            float: right;
            background: #D43C33;
            i{
            	color: white;
            }
        }
	}
	.searchSing{
		padding-left: 15px;
		text-align: left;
		overflow:hidden;
		height: 60px;
		.sing_name{
			padding-top: 10px;
			display: inline-block;
			width: 100%;
			font-size: 17px;
			color: white;
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		}
		.search_p{
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
			.singer{
			color: #D43C33;
			font-size: 12px;
			}
			.album{
				color: #bababb;
				font-size: 12px;
			}
		}
	}
	.tishiBox{
		margin: auto;
		width:75%;
		text-align: left;
		background: white;
		.tishiSearch{
			padding-left:10px;
			color: #BABABB;
			line-height:30px;
		}
		
	}
	.hotP{
		margin:5px 0 5px 10px;
		padding-left:8px;
		color: white;
		font-size: 15px;
		text-align: left;
		border-left: 3px solid #D43C33;
	}
	.hot{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0 15px;
		span{
			color: #bababb;
			border: 1px solid #bababb;
		    border-radius: 20px;
		    padding: 4px;
		    line-height: 20px;
		    margin: 5px;
		    font-size: 14px;
		}
	}
</style>